<agm-map [latitude]="40.5" [longitude]="-80" [zoom]="12">
    <agm-marker *ngFor="let point of points | async" [latitude]="point.pos.geopoint.latitude" [longitude]="point.pos.geopoint.longitude">
        <agm-info-window>


            {{ point.queryMetadata | json }}

        </agm-info-window>
    </agm-marker>


    <agm-circle [latitude]="40.5" [longitude]="-80" [radius]="(radius | async) * 1000"></agm-circle>

</agm-map>


<div class="tools">
    <h1>Query within Radius</h1>
    <pre>collection.within(center, radius, field)</pre>
    <a routerLink="/rt">DEMO 2 - Realtime Query</a>
    <h3>Current Radius: {{ radius | async }}</h3>
    <h3>Documents Found: {{ (points | async)?.length }}</h3>

    <button [disabled]="(radius | async) === 0.25" (click)="update(0.25)">Query to 0.25km</button>
    <button [disabled]="(radius | async) === 5" (click)="update(5)">Query to 5km</button>
    <button [disabled]="(radius | async) === 10" (click)="update(10)">Query to 10km</button>
    <button [disabled]="(radius | async) === 25" (click)="update(25)">Query to 25km</button>
    <button [disabled]="(radius | async) === 1500" (click)="update(1500)">Query to 1500km</button>
</div>